<template>
  <div>
      <ul class="lists">
          <li v-for='course in lists' :key='course.id'>
              <a> 
                  <img :src="course.pic" alt="" srcset="">
              </a>
              <div class="list-bottom">
                  <p class="course-title">{{course.title}}</p>
                  <span>{{course.price}}元</span>
                  <cube-button :primary='true' class="cart" @click='addCart(course)'>加入购物车</cube-button>  
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
    props:['lists'],
  data () {
    return {};
  },

  components: {},

  computed: {},

  methods: {
      ...mapMutations('course',['addCourse']),
      addCart(course){
          this.addCourse(course)
      }
  }
}
</script>
<style lang='less' scoped>
    .lists{
        padding: 0 10%;
        li{
            width: 100%;
            background: #fff;
            margin-bottom: 20px;
            padding-bottom: 20px;
            overflow: hidden;
        }
        a{
            float: left;
            width: 40%;
            padding: 5% 5% 0 5%;
            display: block;
            margin-bottom: 10px;
        }
        img{
            float: left;
            width: 100%;
            height: 80px;
        }
    }
    .list-bottom{
        float: left;
        line-height: 25px;
        padding-top:5%;
        p{
            padding: 0 0 0 10px;
            width: 140px;
        }
        span{
            padding: 5px 0 5px 10px;
        }
        .cube-btn{
            margin-left: 5%;
            height: 10px;
            line-height: 5px;
            width: 115px;
        }
    }
</style>